<template>
  <div class="chart-box">
    <el-card class="box-card">
      <div class="box-body">
        <el-row class="chart">
          <el-col :span="24">
            <div id="chart" class="charts" ref="deptTransRef"></div>
            <dept-select
              class="filter-select"
              :onlyCompany="true"
              placeholder="选择公司"
              :value.sync="deptId"
              :clearable="false"
              @getDeptDetailData="getDeptDetailData"
            />
          </el-col>
        </el-row>
      </div>
    </el-card>
  </div>
</template>

<script>
import { getDeptTransData } from "@/api/deptTran";

export default {
  name: "OperationLog",
  data() {
    return {
      deptId: 2,
      currentMonth: new Date().getMonth() + 1,
      dept: {
        deptName: "1024软件科技有限公司",
      },
    };
  },
  created() {
    let currDate = new Date();
    this.currentMonth =
      currDate.getFullYear() + "-" + (currDate.getMonth() + 1);
  },
  mounted() {
    this.getStatisticsData();
  },
  watch: {
    deptId(nVal) {
      if (!nVal) this.deptId = 2;
      this.getStatisticsData();
    },
  },
  methods: {
    async getStatisticsData() {
      const myCharts = this.$echarts.init(this.$refs.deptTransRef);
      const { data, code } = await getDeptTransData(this.deptId);
      if (code !== 200) return;
      this.key = [];
      this.value = [];
      // this.value = data;
      data.forEach((item) => {
        this.key.push(item["name"]);
        const temp = {};
        temp["name"] = item["name"];
        temp.data = [];
        temp.type = "line";
        temp.stack = "总人数";
        for (let index in item) {
          if (index !== "name") {
            temp.data[index - 1] = item[index];
          }
        }
        this.value.push(temp);
      });

      let option = {
        title: {
          text: "各部门调动（调出）数",
          subtext: `${this.currentMonth}月份，${this.dept.deptName}`,
        },
        tooltip: {
          trigger: "axis",
        },
        legend: {
          left: "500",
          data: this.keys,
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        toolbox: {
          show: true,
          feature: {
            mark: { show: true },
            magicType: { show: true, type: ["line", "bar"] },
            restore: { show: true },
            saveAsImage: { show: true },
          },
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: [
            "一月",
            "二月",
            "三月",
            "四月",
            "五月",
            "六月",
            "七月",
            "八月",
            "九月",
            "十月",
            "十一月",
            "十二月",
          ],
        },
        yAxis: {
            type: 'value',
            // max: 500
        },
        // series: [
        //   {
        //     name: "邮件营销",
        //     type: "line",
        //     stack: "总量",
        //     data: [120, 132, 101, 134, 90, 230, 210],
        //   },
        //   {
        //     name: "联盟广告",
        //     type: "line",
        //     stack: "总量",
        //     data: [220, 182, 191, 234, 290, 330, 310],
        //   },
        //   {
        //     name: "视频广告",
        //     type: "line",
        //     stack: "总量",
        //     data: [150, 232, 201, 154, 190, 330, 410],
        //   },
        //   {
        //     name: "直接访问",
        //     type: "line",
        //     stack: "总量",
        //     data: [320, 332, 301, 334, 390, 330, 320],
        //   },
        //   {
        //     name: "搜索引擎",
        //     type: "line",
        //     stack: "总量",
        //     data: [820, 932, 901, 934, 1290, 1330, 1320],
        //   },
        // ],
        series: this.value,
      };

      myCharts.clear();
      myCharts.setOption(option);
    },
    getDeptDetailData(dept) {
      this.dept = dept;
    },
  },
};
</script>

<style scoped lang="scss">
.chart-box {
  height: 100%;
}
.box-card {
  height: 100%;
}
.box-body {
  height: 100% !important;
}
.chart {
  height: 100%;
}
/deep/ .el-card__body {
  height: 100% !important;
}
.box-body {
  height: 100%;
  position: relative;
}
.el-col {
  height: 100%;
}
#chart {
  height: 100%;
  width: 100%;
  margin-top: 20px;
}
.filter-select {
  width: 200px;
  position: absolute;
  left: 250px;
  top: 16px;
}
</style>